<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      timeout: null,
      timeoutDuration: 7200000
    }
  },
  created() {
    this.resetTimeout();
    this.addEventListeners();
  },
  beforeDestroy() {
    this.removeEventListeners();
    if (this.timeout) {
      clearTimeout(this.timeout);
    }
  },
  methods: {
    addEventListeners() {
      window.addEventListener('mousemove', this.resetTimeout);
      window.addEventListener('keypress', this.resetTimeout);
      window.addEventListener('click', this.resetTimeout);
    },
    removeEventListeners() {
      window.removeEventListener('mousemove', this.resetTimeout);
      window.removeEventListener('keypress', this.resetTimeout);
      window.removeEventListener('click', this.resetTimeout);
    },
    resetTimeout() {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      this.timeout = setTimeout(() => {
        this.logout();
      }, this.timeoutDuration);
    },
    logout() {
      this.$store.dispatch('user/logout');
      this.$router.push(`/login`);
    }
  }
}
</script>
<style>
@import './components/font/font.css';
</style>
